<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>cart demo</title>
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="index.css">
<body>
<div id="container" class="cm-content">
  <div id="cart">
    <div class="header">
      <div class="go left">
        <a>
          <i class="fa fa-chevron-left"></i>
        </a>
        <span>购物车</span>
      </div>
      <!-- <div class="login right">
        <a>编辑</a>
      </div> -->
    </div>
    <div class="cart-null" v-if="list.data.length == 0">
      <div class="img">
        <img src="img/cart-null.png"/>
      </div>
      <div class="text">
        <p>您的购物车能量不足</p>
        <p>请尽快补充能量</p>
      </div>
    </div>
    <div class="cart" v-else>
      <div class="item" v-for="(item,index) in list.data">
        <div class="item-wrap">
          <div class="item-content" :class='{ swipper: swipperClass }'
        @mousedown="md($event)" @mousemove="mm"  @mouseup="mu($event)">
            <div class="select left">
              <input :id="index" @change="check(item)" type="checkbox" name="select" :checked="item.check"/>
              <label class="fa"></label>
            </div>
            <div class="content left">
              <div class="img left">
                <img src="img/xiaomi.jpg" />
              </div>
              <div class="text left">
                <div class="desc">
                  <span v-text="item.name"></span>
                  <span v-for="tag in item.tag" v-text="tag"></span>
                </div>
                <div class="price">
                  <i class="fa fa-yen"></i>
                  <span v-text="item.price"></span>
                </div>
                <div class="count">
                  <span>数量:</span>
                  <span v-text="item.count"></span>
                  <div class="right">
                    <span @click="minus(item)"><i class="fa fa-minus"></i></span>
                    <span @click="plus(item)"><i class="fa fa-plus"></i></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="del left">
              <a @click="splices(index)"><i class="fa fa-minus-circle"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="balance">
    <div class="cm-content">
      <div class="all left">
        <input type="checkbox" v-model="all" name="all" id="all" />
        <label for="all" class="fa">全选</label>
      </div>
      <div class="text left">
        <span>总计:</span>
        <i class="fa fa-yen"></i>
        <span class="money" v-text="count.price">2166.04</span>
      </div>
      <div class="balance-btn right">
        <a>去结算</a>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#container',
    data: {
      list: {
        data: [
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: '', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: '', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: '', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: '', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: '', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: '', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: '', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: '', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: '', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: '', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: '', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: '', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: '', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: '', price: '1999', count: '1', check: true}
        ]
      },
      wrapLength: '',
      swipperClass: false,
      position: {
        start: 0,
        end: 0
      },
      mlock: true,
      left: '',
      all: true
    },
    computed: {
      count () {
        var sum = {
          count: 0,
          price: 0
        }
        var i = 0
        for (;i < this.list.data.length; i++) {
          if (this.list.data[i].check) {
            sum.count += Number(this.list.data[i].count)
            sum.price += Number(this.list.data[i].price)*Number(this.list.data[i].count)
          }
        }
        return sum
      }
    },
    mounted: function() {
      var self = this;
      var items = document.querySelectorAll('.cart .item .item-content');
      self.wrapLength = window.getComputedStyle(document.documentElement)["fontSize"].replace('px', '');
      self.onresize();
      [].forEach.call(items, function(e){
        self.touchstart(e);
        self.touchmove(e);
        self.touchend(e);
      });
    },
    methods: {
      onresize: function() {
        var self = this;
        window.onresize = function() {
          self.wrapLength = window.getComputedStyle(document.documentElement)["fontSize"].replace('px', '');
        };
      },
      /** 点击开始事件 */
      start: function(e,x) {
        this.mlock = false;
        this.swipperClass = false;
        this.position.start = x;
        this.left = e.target.style.left.replace('px', '');
      },
      /** 移动事件 */
      move: function(e,x) {
        var obj = e.target;
        if(!this.mlock && Math.abs(x- this.position.start) > 0) {
          obj.style.left =  x- this.position.start + Number(this.left)  + 'px';
        }
      },
      /** 松开事件 */
      end: function(e,x) {
        this.obj = e.target;
        this.mlock = true;
        this.position.end = x;  
        this.swipperClass = true;  
      },
      /** 鼠标点击 */
      md: function(e) {
        this.start(e,e.clientX);
      },
      /** 鼠标移动 */
      mm: function(e) {
        this.move(e,e.clientX);
      },
      /** 松开鼠标 */
      mu: function(e) {
        this.end(e,e.clientX);
      },
      /** 手指按入 */
      touchstart: function(e) {
        var self = this;
        e.addEventListener('touchstart', function(event) {
          self.start(event, event.changedTouches[0].clientX);
        },false);
      },
      /** 手指移动 */
      touchmove: function(e) {
        var self = this;
        e.addEventListener('touchmove', function(event) {
          self.move(event, event.changedTouches[0].clientX);
        },false);
      },
      /** 手指抬起 */
      touchend: function(e) {
        var self = this;
        e.addEventListener('touchend', function(event) {
          self.end(event, event.changedTouches[0].clientX);
        },false);
      },
      /** 核对 */
      check: function(item) {
        item.check = !item.check
      },
      /** - */
      minus: function(item) {
        var count = item.count
        if (count == '1') return false  
        count = Number(count)
        count--
        item.count = count.toString()
      },
      /** + */
      plus: function(item) {
        var count = item.count
        count = Number(count)
        count++
        item.count = count.toString()
      },
      /** 删除 */
      splices: function(i) {
        this.list.data.splice(i, 1);
        document.querySelectorAll('.item .item-content')[i].removeAttribute('style');
      }
    },
    watch: {
      'swipperClass': function(item) {
        if(item) {
          if(this.position.start - this.position.end > this.wrapLength) {
            this.obj.style.left = -3*this.wrapLength + 'px';
          } else if (this.position.end - this.position.start  > this.wrapLength) {
            this.obj.style.left = 0 + 'px';
          } else if ( Math.abs(this.position.start - this.position.end) > 0 ) {
            this.obj.style.left = 0 + 'px';
          }
        }
      },
      'all': function(item) {
        for(var i = 0; i < this.list.data.length; i++){
          var itemObject = this.list.data[i];
          itemObject.check = item;
          Vue.set(this.list.data, i, itemObject);
        }
      }
    }
  });
</script>
</html>